import React, { Component } from 'react'
import styles from './index.module.scss'
export default class Affix extends Component {
    placeholderRef = React.createRef()
    contentRef = React.createRef()
    onScroll = () => {
        // 获取占位的div，离顶部屏幕的间距
        const { top } = this.placeholderRef.current.getBoundingClientRect()
        // console.log('----', top)
        if (top <= 0) {
            this.contentRef.current.classList.add(styles.fixed)
            this.placeholderRef.current.style.height = '40px'
        } else {
            this.contentRef.current.classList.remove(styles.fixed)
            this.placeholderRef.current.style.height = '0px'
        }

    }
    componentDidMount() {
        window.addEventListener('scroll', this.onScroll)
    }
    componentWillUnmount() {
        window.removeEventListener('scroll', this.onScroll)
    }
    render() {
        return (
            <div>
                {/* 占位的div，刚开始的高度为0 */}
                <div ref={this.placeholderRef} id='11111'></div>
                {/* 内容的div */}
                <div ref={this.contentRef}>{this.props.children}</div>
            </div>
        )
    }
}
